/*******************************************************************************
* KindEditor - WYSIWYG HTML Editor for Internet
* Copyright (C) 2006-2011 kindsoft.net
*
* @author Roddy <luolonghao@gmail.com>
* @site http://www.kindsoft.net/
* @licence http://www.kindsoft.net/license.php
*******************************************************************************/

KindEditor.plugin('filemanager',
    function (K) {
        var self = this,
            name = 'filemanager',
            fileManagerJson = K.undef(self.fileManagerJson, self.basePath + 'php/file_manager_json.php'),
            imgPath = self.pluginsPath + name + '/images/',
            lang = self.lang(name + '.');

        function makeFileTitle(filename, filesize, datetime) {
            return filename + ' (' + Math.ceil(filesize / 1024) + 'KB, ' + datetime + ')';
        }

        function bindTitle(el, data) {
            if (data.is_dir) {
                el.attr('title', data.filename);
            } else {
                el.attr('title', makeFileTitle(data.filename, data.filesize, data.datetime));
            }
        }

        self.plugin.filemanagerDialog = function (options) {
            var width = K.undef(options.width, 650),
                height = K.undef(options.height, 510),
                dirName = K.undef(options.dirName, ''),
                viewType = K.undef(options.viewType, 'VIEW').toUpperCase(), // "LIST" or "VIEW"
                clickFn = options.clickFn;
            var html = [
                '<div style="padding:10px 20px;">',
                // header start
                '<div class="ke-plugin-filemanager-header">',
                // left start
                '<div class="ke-left">',
                '<img class="ke-inline-block" name="moveupImg" src="' +
                imgPath +
                'go-up.gif" width="16" height="16" border="0" alt="" /> ',
                '<a class="ke-inline-block" name="moveupLink" href="javascript:;">' + lang.moveup + '</a>',
                '</div>',
                // right start
                '<div class="ke-right">',
                lang.viewType + ' <select class="ke-inline-block" name="viewType">',
                '<option value="VIEW">' + lang.viewImage + '</option>',
                '<option value="LIST">' + lang.listImage + '</option>',
                '</select> ',
                lang.orderType + ' <select class="ke-inline-block" name="orderType">',
                '<option value="NAME">' + lang.fileName + '</option>',
                '<option value="SIZE">' + lang.fileSize + '</option>',
                '<option value="TYPE">' + lang.fileType + '</option>',
                '</select>',
                '</div>',
                '<div class="ke-clearfix"></div>',
                '</div>',
                // body start
                '<div class="ke-plugin-filemanager-body"></div>',
                '</div>'
            ].join('');
            var dialog = self.createDialog({
                name: name,
                width: width,
                height: height,
                title: self.lang(name),
                body: html
            }),
                div = dialog.div,
                bodyDiv = K('.ke-plugin-filemanager-body', div),
                moveupImg = K('[name="moveupImg"]', div),
                moveupLink = K('[name="moveupLink"]', div),
                viewServerBtn = K('[name="viewServer"]', div),
                viewTypeBox = K('[name="viewType"]', div),
                orderTypeBox = K('[name="orderType"]', div);

            function reloadPage(path, order, func) {
                var param = 'path=' + path + '&order=' + order + '&dir=' + dirName;
                dialog.showLoading(self.lang('ajaxLoading'));
                K.ajax(K.addParam(fileManagerJson, param + '&' + new Date().getTime()),
                    function (data) {
                        dialog.hideLoading();
                        func(data);
                    });
            }

            var elList = [];

            function bindEvent(el, result, data, createFunc) {
                var fileUrl = K.formatUrl(result.current_url + data.filename, 'absolute'),
                    dirPath = encodeURIComponent(result.current_dir_path + data.filename + '/');
                if (data.is_dir) {
                    el.click(function (e) {
                        reloadPage(dirPath, orderTypeBox.val(), createFunc);
                    });
                } else if (data.is_photo) {
                    el.click(function (e) {
                        clickFn.call(this, fileUrl, data.filename);
                    });
                } else {
                    el.click(function (e) {
                        clickFn.call(this, fileUrl, data.filename);
                    });
                }
                elList.push(el);
            }

            function createCommon(result, createFunc) {
                // remove events
                K.each(elList,
                    function () {
                        this.unbind();
                    });
                moveupLink.unbind();
                viewTypeBox.unbind();
                orderTypeBox.unbind();
                // add events
                if (result.current_dir_path) {
                    moveupLink.click(function (e) {
                        reloadPage(result.moveup_dir_path, orderTypeBox.val(), createFunc);
                    });
                }

                function changeFunc() {
                    if (viewTypeBox.val() == 'VIEW') {
                        reloadPage(result.current_dir_path, orderTypeBox.val(), createView);
                    } else {
                        reloadPage(result.current_dir_path, orderTypeBox.val(), createList);
                    }
                }

                viewTypeBox.change(changeFunc);
                orderTypeBox.change(changeFunc);
                bodyDiv.html('');
            }

            function createList(result) {
                createCommon(result, createList);
                var table = document.createElement('table');
                table.className = 'ke-table';
                table.cellPadding = 0;
                table.cellSpacing = 0;
                table.border = 0;
                bodyDiv.append(table);
                var fileList = result.file_list;
                for (var i = 0, len = fileList.length; i < len; i++) {
                    var data = fileList[i], row = K(table.insertRow(i));
                    row.mouseover(function (e) {
                        K(this).addClass('ke-on');
                    })
                        .mouseout(function (e) {
                            K(this).removeClass('ke-on');
                        });
                    var iconUrl = imgPath + (data.is_dir ? 'folder-16.gif' : 'file-16.gif'),
                        img = K('<img src="' +
                            iconUrl +
                            '" width="16" height="16" alt="' +
                            data.filename +
                            '" align="absmiddle" />'),
                        cell0 = K(row[0].insertCell(0)).addClass('ke-cell ke-name').append(img)
                            .append(document.createTextNode(' ' + data.filename));
                    if (!data.is_dir || data.has_file) {
                        row.css('cursor', 'pointer');
                        cell0.attr('title', data.filename);
                        bindEvent(cell0, result, data, createList);
                    } else {
                        cell0.attr('title', lang.emptyFolder);
                    }
                    K(row[0].insertCell(1)).addClass('ke-cell ke-size')
                        .html(data.is_dir ? '-' : Math.ceil(data.filesize / 1024) + 'KB');
                    K(row[0].insertCell(2)).addClass('ke-cell ke-datetime').html(data.datetime);
                }
            }

            function createView(result) {
                createCommon(result, createView);
                var fileList = result.file_list;
                for (var i = 0, len = fileList.length; i < len; i++) {
                    var data = fileList[i],
                        div = K('<div class="ke-inline-block ke-item"></div>');
                    bodyDiv.append(div);
                    var photoDiv = K('<div class="ke-inline-block ke-photo"></div>')
                        .mouseover(function (e) {
                            K(this).addClass('ke-on');
                        })
                        .mouseout(function (e) {
                            K(this).removeClass('ke-on');
                        });
                    div.append(photoDiv);
                    var fileUrl = result.current_url + data.filename,
                        iconUrl = data.is_dir
                            ? imgPath + 'folder-64.gif'
                            : (data.is_photo ? fileUrl : imgPath + 'file-64.gif');
                    var img = K('<img src="' + iconUrl + '" width="80" height="80" alt="' + data.filename + '" />');
                    if (!data.is_dir || data.has_file) {
                        photoDiv.css('cursor', 'pointer');
                        bindTitle(photoDiv, data);
                        bindEvent(photoDiv, result, data, createView);
                    } else {
                        photoDiv.attr('title', lang.emptyFolder);
                    }
                    photoDiv.append(img);
                    div.append('<div class="ke-name" title="' + data.filename + '">' + data.filename + '</div>');
                }
            }

            viewTypeBox.val(viewType);
            reloadPage('', orderTypeBox.val(), viewType == 'VIEW' ? createView : createList);
            return dialog;
        }
    });